<template>
  <div>
    <div>
      <el-input
        size="medium"
        class="selectInput"
        placeholder="输入关键字查询"
        v-model="selectKey"
        suffix-icon="el-icon-circle-plus-outline">
      </el-input>
      <el-button
        size="medium" icon="el-icon-circle-plus-outline" type="success"
        @click="handleSelectKey">查询
      </el-button>
      <el-button
        type="success" size="medium" icon="el-icon-top-right" plain
        @click="exportData">导出文件
      </el-button>
    </div>
    <div>
      <el-table
        border
        ref="singleTable"
        :data="tableData"
        :cell-style="{padding: '0'}"
        highlight-current-row
        style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.goodName }}</span>
              </el-form-item>
              <el-form-item label="商品品牌">
                <span>{{ props.row.brand }}</span>
              </el-form-item>
              <el-form-item label="新旧程度">
                  <span class="el-tag el-tag--success el-tag--mini el-tag--light">
                    {{props.row.goodNewold+"成新"}}
                  </span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.description }}</span>
              </el-form-item>
              <el-form-item label="使用须知">
                <i class="el-icon-warning" style="margin-right: 2px"></i>
                <span>{{ props.row.usedKnow }}</span>
              </el-form-item>
              <el-form-item label="上传时间">
                <span>{{ props.row.createTime }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          property="goodId"
          label="编号"
          width="60">
        </el-table-column>
        <el-table-column
          property="goodName"
          label="商品名称"
          width="340"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          property="category"
          label="商品类型"
          width="120">
        </el-table-column>
        <el-table-column
          property="imgurl"
          label="商品图"
          width="80">
          <template #default="scope">
            <el-image class="table-td-thumb"
                      :src="scope.row.imgurl"
                      :preview-src-list="[scope.row.imgurl]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          property="rentPriceHour"
          label="价格/小时"
          width="100">
        </el-table-column>
        <el-table-column
          property="rentPriceDay"
          label="价格/天"
          width="100">
        </el-table-column>
        <el-table-column
          property="yaPrice"
          label="押金"
          width="100">
        </el-table-column>
        <el-table-column
          property="status"
          label="审核状态"
          width="120">
          <template slot-scope="scope">
            <el-tag size="small" :type="scope.row.status==2?'danger':scope.row.status==1?'success':''">{{scope.row.status==0?'未审核':scope.row.status==1?'通过':'未通过'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          property="uploadStatus"
          label="发布状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.uploadStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="发布"
              inactive-text="下架"
              @change="enabledChange(scope.$index, scope.row)"
              :disabled="scope.row.status===1?false:true">
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <!--分页条-->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[8, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'GoodSysData',
    data () {
      return {
        // 每页显示的条数
        size: 8,
        // 总条数
        total: 100,
        // 当前页码
        current:1,
        tableData: [],
        selectKey:'',
      }
    },
    mounted () {
      this.initTable();
    },
    methods: {
      // 当每页条数改变时
      handleSizeChange(val) {
        // 将val重新复制给size
        this.size=val;
        // 重新去后台查询数据
        this.initTable();
      },
      // 当每页码数改变时
      handleCurrentChange(val) {
        // 将val重新复制给current
        this.current=val;
        this.initTable();
      },
      // 商品状态
      enabledChange(index,data){
        console.log(data.uploadStatus)
        if(data.status===1){
          this.putRequest('/personal/data/rent/',data).then(resp=>{
            if (resp){
              this.$notify.success({ title: '成功', message: resp.message });
            }
          })
        }

      },
      // 导出表格
      exportData(){
        this.$confirm('确认导出商品?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.downloadRequest('/good/data/rent/export')
          this.$notify.success({ title: '成功', message: '导出成功' });
        }).catch(() => {
          this.$notify.info({ title: '消息', message: '已取消导出' });
        });
      },
      //查询全部数据
      initTable () {
        let url = '/good/data/yesPage/?current='+this.current+'&&size='+this.size;
        this.postRequest(url).then(resp => {
          if (resp) {
            this.tableData = resp.records;
            this.total=resp.total;
            console.log(resp)
          }
        })
      },
      //模糊查询商品
      handleSelectKey(){
        if (this.selectKey){
          this.postRequest('/good/data/rent/some/?selectKey='+this.selectKey+'&&uploadStatus='+1+'&&userId='+''+'&&status='+''+'&&categoryName='+'').then(resp=> {
            if (resp) {
              this.tableData=resp;
              this.selectKey='';
              this.$notify.success({ title: '成功', message: '查询成功' });
            }
          })
        }else {
          this.initTable();
        }
      },
    }
  }
</script>

<style scoped>
  .selectInput{
    width: 220px;
    margin: 10px 10px 10px 15px;
  }
  .table-td-thumb{
    width: 40px;
    margin: 4px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-left: 120px;
    margin-bottom: 0;
    width: 50%;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .pagination{
    margin: 15px 380px 0 380px;
  }

</style>
